<template>
	<view class="my-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<image class="avatar" src="/static/avatars/mao.png"></image>
			<view class="user-info">
				<text class="username">{{ userInfo.nickname || '成语达人' }}</text>
				<text class="login-time">最近登录: {{ lastLoginTime }}</text>
				<view class="level-badge">
					<text class="level-text">Lv.{{ userInfo.level || 1 }}</text>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="navigateToRank">
				<image class="menu-icon" src="/static/icons/rank.png"></image>
				<text class="menu-text">排行榜</text>
				<image class="arrow" src="/static/icons/arrow-right.png"></image>
			</view>

			<view class="menu-item" @click="navigateToAbout">
				<image class="menu-icon" src="/static/icons/about.png"></image>
				<text class="menu-text">关于我们</text>
				<image class="arrow" src="/static/icons/arrow-right.png"></image>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<button class="logout-btn" @click="handleLogout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				lastLoginTime: '加载中...'
			}
		},
		onShow() {
			this.loadUserInfo()
		},
		methods: {
			async loadUserInfo() {
				try {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.redirectTo({
							url: '/pages/login/login'
						})
						return
					}

					// 调用用户信息接口
					const res = await uni.request({
						url: 'http://localhost:8003/api/v1/user/info',
						method: 'GET',
						header: {
							'Authorization': 'Bearer ' + token
						}
					})

					if (res.statusCode === 200 && res.data.code === 200) {
						this.userInfo = res.data.data
						this.formatLoginTime(this.userInfo.lastLogin)
					} else {
						throw new Error(res.data.message || '获取用户信息失败')
					}
				} catch (error) {
					uni.showToast({
						title: error.message,
						icon: 'none'
					})
				}
			},

			formatLoginTime(timestamp) {
				if (!timestamp) {
					this.lastLoginTime = '暂无记录'
					return
				}
				const date = new Date(timestamp)
				this.lastLoginTime =
					`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
			},

			navigateToRank() {
				uni.switchTab({
					url: '/pages/rank/rank'
				})
			},

			navigateToAbout() {
				uni.navigateTo({
					url: '/pages/about/about'
				})
			},

			navigateToDisclaimer() {
				uni.navigateTo({
					url: '/pages/disclaimer/disclaimer'
				})
			},

			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('nickname')
							uni.removeStorageSync('isLogin')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.user-card {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #3a7bd5, #00d2ff);
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(58, 123, 213, 0.2);

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
		}

		.user-info {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;

			.username {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10rpx;
			}

			.login-time {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 15rpx;
			}

			.level-badge {
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 30rpx;
				padding: 6rpx 20rpx;
				align-self: flex-start;

				.level-text {
					font-size: 24rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}

	.menu-list {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);

		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.menu-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.menu-text {
				flex: 1;
				font-size: 32rpx;
				color: #333;
			}

			.arrow {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.logout-btn {
		margin-top: 60rpx;
		background-color: #fff;
		color: #ff4d4f;
		border: 1rpx solid #ff4d4f;
		border-radius: 50rpx;
		font-size: 32rpx;
		width: 100%;

		&::after {
			border: none;
		}
	}

	/* 禁用页面滚动 */
	page {
		height: 100%;
		overflow: hidden;
		background-color: #f5f7fa;
	}

	.my-container {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		position: fixed;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
</style>